<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq和js的区别</title>
	<style type="text/css">
		ul li{
			display: block;
		}
	</style>
</head>
<body>
<ul>
	<li>这里就是首页了</li>
	<li><a href="jqBanma.html">jq斑马线</a></li>
	<li><a href="bianhua.html">显示和隐藏</a></li>
	<li><a href="jqGet.html">体验一下获得元素方式的不同</a></li>
	<li><a href="jqToggle.html">留言的显示和隐藏</a></li>
	<li><a href="relation.html">获取元素的各种关系方法</a></li>
	<li><a href="attr.html">属性的获取，更改。用JQ做选项卡</a></li>
	<li><a href="charu.html">插入</a></li>
	<li><a href="shanchu.html">删除的姿势</a></li>
	<li>以上是笔记</li>
</ul>
<ul>
	<li>下面全部是作业</li>
	<li><a href="homework/bs表单/index.html">bs表单jq写法</a></li>
	<li><a href="homework/banmaxian/sort.html">蜜蜂JQ斑马线</a></li>
	<li><a href="homework/easn/index.html">伊森手表的JQ斑马线在底部</a></li>
</ul>
<p id="p1" class="">我是有内容的</p>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	// console.log($.fn.jquery)//1.11.1
	// window.onload=function(){
	// 	alert("获取图片2")
	// }//整个JS载入后弹出


	// $(document).ready(function(){
	// 	alert("获取图片对象1")
	// })
	// $(function(){
	// 	alert('页面载入了。。。')
	// })

	//dom元素：document.getElementById()
	//jq对象:$(dom元素)
	var p1Dom=document.getElementById('p1');
	console.log(p1Dom);
	var p1Jq=$('p')
	console.log(p1Jq)//一个对象来的，里面包含p1 dom

	//jq转dom
	console.log('dom:',p1Jq[0])
	//判断一下是否相等
	console.log(p1Dom===p1Jq[0])//true


//报错机制不同
		// innerHTML 是js里面dom对象的属性
		// html() 是 jquery里面jq对象的方法
		console.log(p1Dom.innerHTML)
		console.log(p1Jq.innerHTML)//不报错
		// alert(1)	
		//alert(1)//照样执行
		
		console.log(p1Jq.html())
		// console.log(p1Dom.html()) // 报错
		// alert(2) // js 上面报错下面不执行

		// 3. js 事件 和 jq事件上的不同
		
		// js on+方法名 == jq 方法名
		// e.g. onclick == click()
		// 写法上 
		// dom元素.onclick = function() { ...}
		// jq对象.click( function() {} 
	</script>
</body>
</html>